<template>
	<scroll-view scroll-x="true" @scroll="scroll" class="recommend">
		<view class="img-wapper">
			<view class="item-item" v-for="item in list" :key="item.Id">
				<image class="item-image" :src="item.path"></image>
				<div class="item-desc">
					<view class="item-title">
						<text style="color: #DD524D;" v-if="item.type==1">活动#</text>
						<text style="color: #fcc747;" v-else>商品#</text>
						<text v-text="item.title"></text>
					</view>
				</div>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "srcoll-x",
		props: {
			list: Array
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../common/scss/_common.scss';

	.recommend {
		white-space: nowrap;
		box-sizing: border-box;
		padding-left: ws(15);
		margin-bottom: ws(10);
		width: 100%;
		height: ws(320/2);
		.item-item {
			width: ws(250);
			height: ws(320/2);
			overflow: hidden;
			position: relative;
			background-color: transparent;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			margin-right: ws(15);
			box-shadow: $shaow-bottom;
			border-radius: ws(10);

			.item-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.item-desc {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				display: flex;
				align-items: flex-end;
				background: linear-gradient(rgba(#fff, .4), rgba(#000, .3));

				.item-title {
					width: 100%;
					margin-bottom: ws(10);
					margin-left: ws(10);
					font-size: ws(15);
					color: #fff;
					font-weight: bold;
					text-align: left;
					@include one-line;
				}
			}

			.item-icon {
				position: absolute;
				z-index: -1;
				width: ws(25);
				height: ws(25);
				top: ws(15);
				left: ws(8);
				opacity: .7;
			}
		}
	}
</style>
